<template>
    <div class="container">
        <div class="header-top">
            <ul class="ecsc-body-header">
                <li> 
                    <el-input class="ecsc-middle-input" placeholder="请输入内容" v-model="searchValue" clearable> </el-input>
                </li>
                <li>Dowloand</li>
                <li>Setting</li>
                <li>Profile</li>
                <li>Help</li>
            </ul>          
        </div>       
        <div class="body-con">
            <div class="nav-con">
                <div class="nav-inner">
                    <ecsc-nav></ecsc-nav>
                </div>               
            </div>
            <div class="body-main">
                <div class="main">
                    <keep-alive :include="keepAliveInclude">
                        <router-view></router-view>
                    </keep-alive>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapGetters, mapMutations, mapActions} from 'vuex';
import ecscNav from './EcscNav.vue';
export default {
    name: 'EcscNav',
    data() {
        return {
            searchValue: ''
        }
    },
    computed: {
        ...mapGetters(['keepAliveInclude'])
    },
    created(){
        console.log(this.$route,'aaaa')
    },
    components: {
        ecscNav
    }
}
</script>
<style lang="less" scoped>
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
        flex-direction: column;
    }
    .header-top {
        height: 46px;
        background-color: #233A50;
        color: #fff;
        font-size: 14px;
        line-height: 46px;
        padding-left: 10px;
    }
    .nav-con {
        width: 160px;
        background-color: #233A59;
        transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
        overflow: auto;
        z-index: 210;
    }
    .nav-inner{
        height: 100%;
        background: rgb(232, 232, 233);
    }
    .body-con{
        flex-grow: 1;
        position: relative;
        background-color: #f4f9fa;
        display: flex;
        flex-direction: row;
    }
    .body-main{
        position: relative;
        flex-grow: 1;
        background-color: #fff;
    }
    .main {
        background-color: #fff;
        position: absolute;
        left: 16px;
        right: 16px;
        top: 8px;
        bottom: 8px;
    }
    .ecsc-body-header{
        color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    .ecsc-body-header li{
        padding: 0 10px;
    }
</style>

